<template>
  <div class="home">
    <h3 @click="fn">首页</h3>
    <TabBar></TabBar>
    <Search :mess="mess"></Search>
    <van-tabs>
      <van-tab v-for="(item, index) in title" :title="item" :key="index">
      </van-tab>
    </van-tabs>
    <div class="content">
      <div class="conten" v-for="(item, index) in conte" :key="index">
        <img :src="item.image" alt="" />
        <p>{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import instance from "@/api/api";
import TabBar from "../components/TabBar.vue";
import Search from "../components/Search.vue";
export default {
  name: "HomeView",
  components: {
    TabBar,
    Search,
  },
  data() {
    return {
      mess: "首页搜索",
      title: [
        "推荐",
        "女装",
        "百货",
        "男装",
        "鞋包",
        "食品",
        "手机",
        "内衣",
        "医药",
        "电器",
        "水果",
        "家具",
        "运动",
        "美妆",
        "母婴",
        "家纺",
        "饰品",
        "家装",
        "电脑",
        "海淘",
        "玩乐",
      ],
      conte: "",
    };
  },
  methods: {
    fn(){
      
    },
    getfn() {
      instance.get("/get").then((res) => {
        console.log(res);
      });
    },
    async getconten() {
      let { data } = await instance.get("/types");
      console.log(data.list);
      this.conte = data.list;
    },
  },
  created() {
    this.getconten();
  },
};
</script>
<style scoped lang="less">
.home {
  width: 375px;
  height: 100px;
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 150px;
    overflow: hidden;
    padding: 5px;
    border-bottom: 5px solid #eee;
    .conten {
      width: 20%;
      margin: 10px 0;
      p {
        font-size: 14px;
        align-items: center;
      }
      img{
        margin-left: 10px;
      }
    }
  }
}
</style>,